<template>
  <div class="status-label">
    <span :style="{backgroundColor: filterStatus(status).color}" class="dot"/>
    {{ filterStatus(status).msg }}
    <!-- <span>{{ filterStatus(status).msg }}</span> -->
    <!-- <img v-if="filterStatus(status).image" :src="filterStatus(status).image" alt=""> -->
  </div>
</template>

<script>
import iconDelete from '@/assets/icon_delete.png';
import iconWait from '@/assets/auditProcess/status4.png';
import iconComplete from '@/assets/auditProcess/status4.png';
export default {
  name: 'StatusLabel',
  props: {
    status: {
      type: Number,
      default: -1
    },
    examineStatus: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      iconWait,
      iconComplete,
      iconDelete
    };
  },
  methods: {
    filterStatus(status) {
      switch (status) {
        case 0:
          return {
            msg: '待审批',
            image: this.iconWait,
            backgroundColor: '#FFEFE6',
            color: '#FD8546'
          };
        case 1:
          return {
            msg: '待上传',
            backgroundColor: '#eff3fb',
            color: '#406eff'
          };
        case 2:
          return {
            msg: '已完成',
            image: this.iconComplete,
            backgroundColor: '#dff8f0',
            color: '#31CC9C'
          };
        case 3:
          return {
            msg: '待提交',
            image: this.iconWait,
            backgroundColor: '#F7ECEC',
            color: '#E02020'
          };
        case 4:
          return {
            msg: '待封存',
            backgroundColor: '#FFEFE6',
            color: '#FD8546'
          };
        default:
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.status-label {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 5px;
  border-radius: 16px;
  img {
    margin-left: 4px;
    width: 16px;
    height: 16px;
  }
}
.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 5px;
}
</style>
